import { type VNode, h } from 'vue'
import type { SliderProps, TextAreaProps, RadioChangeEvent } from 'ant-design-vue'
import type { ImageComponentProps, TextComponentProps } from '@/defaultProps'
import ColorPicker from '@/components/ColorPicker.vue'

export interface PropsToForm {
  component: string
  // 组件中包裹子组件
  subComponent?: string
  // 组件的属性
  extraProps?: { [key: string]: any }
  // 说明
  text?: string
  // 子组件的一些属性
  options?: { text: string | VNode; value: any }[]
  // 传入给组件的value类型转换
  initialTransform?: (v: any) => any
  // 各个组件事件抛出的值，转换成为可以直接写入stroge的
  afterTransform?: (v: any) => any
  // value 的字段名可以替换
  valueProp?: string
  //修改完成value后的事件的名称,默认是change
  eventName?: string
}

export type PropsToForms = {
  [p in keyof TextComponentProps & ImageComponentProps]?: PropsToForm
}

const fontFamilyArr = [
  { text: '宋体', value: '"SimSun","STSong"' },
  { text: '黑体', value: '"SimHei","STHeiti"' },
  { text: '楷体', value: '"KaiTi","STKaiti"' },
  { text: '仿宋', value: '"FangSong","STFangsong"' }
]
const fontFamilyOptions = fontFamilyArr.map((item) => {
  return {
    value: item.value,
    text: h('span', { style: { fontFamily: item.value } }, item.text)
  }
})

// 画布中每个组件的props属性，使用哪种组件进行渲染，修改
// 需要在main.ts 中先全局导入
export const mapPropsToForms: PropsToForms = {
  text: {
    component: 'a-textarea',
    text: '文本',
    extraProps: {
      rows: 3
    } as TextAreaProps,
    afterTransform: (e: any) => e.target.value
  },
  fontSize: {
    text: '字号',
    component: 'a-input-number',
    initialTransform: (v: string) => parseInt(v),
    afterTransform: (v: number) => (v ? `${v}px` : 1)
  },
  lineHeight: {
    text: '行高',
    component: 'a-slider',
    extraProps: {
      min: 0,
      max: 3,
      step: 0.1
    } as SliderProps,
    initialTransform: (v: string) => parseFloat(v),
    afterTransform: (v: number) => v.toString()
  },
  textAlign: {
    text: '对齐',
    component: 'a-radio-group',
    subComponent: 'a-radio',
    options: [
      { text: '左对齐', value: 'left' },
      { text: '居中', value: 'center' },
      { text: '右对齐', value: 'right' }
    ],
    afterTransform: (v: RadioChangeEvent) => v.target.value
  },
  fontFamily: {
    text: '字体',
    component: 'a-select',
    subComponent: 'a-select-option',
    options: [{ value: '', text: '无' }, ...fontFamilyOptions]
  },
  opacity: {
    text: '透明度',
    component: 'a-slider',
    extraProps: {
      min: 0,
      max: 100,
      step: 1,
      reverse: true
    } as SliderProps,
    initialTransform: (v: string) => Number(v) * 100,
    afterTransform: (v: number) => (v / 100).toString()
  },
  color: {
    text: '颜色',
    component: ColorPicker,
    afterTransform: (color: string) => {
      if (!color) {
        return '#000000'
      }
      return color
    }
  },
  // TODO 替换图片的组件
  src: {
    text: '图片',
    component: 'a-textarea',
    afterTransform: (e: any) => e.target.value
  }
}
